// 只要一进入这个页面，我们就倒计时

import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';

export const NotFound = () => {
  const history = useHistory();

  // 倒计时的时间，是我们页面的状态
  // 实现的是，每隔一秒去修改一下状态

  const [count, setCount] = useState(5);

  // 页面渲染完毕后，继续修改 count
  useEffect(() => {
    // 倒计时终止调价
    if (count === 0) {
      //页面跳转，或者return
      history.replace('/home');
      return;
    }

    const timerId = setInterval(() => {
      setCount(count - 1);
    }, 1000);
    console.log('每次count改变，新建的timerId', timerId);
    // useEffect 如果有返回值，一定是一个函数
    // 这个函数是清理函数
    return () => {
      console.log('每次count改变，清除上次的timerId', timerId);
      clearInterval(timerId);
    };
  }, [count]);

  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <h1>{count}</h1>
    </div>
  );
};
